<template>
  <div class="forget">
    <div class="forgetbox" id="forget">
      <div class="forget-header">
        <span class="forget-title">忘记密码</span>
        <span class="forget-tip" v-if="isforget"
          >请输入您已注册的手机号修改密码</span
        >
        <span class="forget-tip" v-if="!isforget"
          >请输入6-18位数字和字符或者符号的组合</span
        >
      </div>
      <Smscode sign="forget" v-if="isforget"></Smscode>
      <div class="smsbox" v-show="!isforget" style="margin-top: 24px">
        <el-form
          ref="PassForm"
          :model="PassForm"
          :rules="PassRulues"
          label-width="80px"
        >
          <el-form-item label="密码" prop="password">
            <el-input
              type="password"
              v-model="PassForm.password"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="确认密码" prop="checkPass">
            <el-input
              type="password"
              v-model="PassForm.checkPass"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              @click="ChangePass()"
              style="float: right; margin-top: 5px"
              >确认修改</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import Smscode from "@/components/Smscode";
import { encrypt } from "../plugins/rsaEncrypt"; //引入rsaEncrypt.js
export default {
  components: { Smscode },
  computed: {
    forgetcon() {
      return this.$store.getters.getForgetContion;
    },
  },
  watch: {
    forgetcon: {
      handler(val) {
        if (val != " ") {
          this.PassForm.phone = val;
          this.$store.commit("setSmsContion", {
            key: "forget",
            value: " ",
          });
          this.isforget = !this.isforget;
        }
      },
    },
  },

  data() {
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else if (
        !/^(?![\d]+$)(?![a-zA-Z]+$)(?![^\da-zA-Z]+$)([^\u4e00-\u9fa5\s]){6,18}$/.test(
          value
        )
      ) {
        callback(new Error("请输入6-18位数字和字符或者符号的组合"));
      } else {
        if (this.PassForm.checkPass !== "") {
          this.$refs.PassForm.validateField("checkPass");
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.PassForm.password) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      isforget: true,
      PassForm: {
        password: "",
        chckPass: "",
        phone: "",
      },
      PassRulues: {
        password: [
          { required: true, validator: validatePass, trigger: "blur" },
        ],
        checkPass: [
          { required: true, validator: validatePass2, trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    //发送短信
    //发送短信
    ChangePass() {
      this.$refs.PassForm.validate(async (valid) => {
        if (!valid) return false;
        else {
          this.axios
            .post("/user/changePass", {
              phone: this.PassForm.phone,
              password: encrypt(this.PassForm.password),
            })
            .then((res) => {
              if (res.data.code == 200) {
                this.$confirm(res.data.message, "", {
                  confirmButtonText: "前往登录",
                  cancelButtonText: "取消",
                  type: "warning",
                })
                  .then(() => {
                    this.$router.push("/login");
                  })
                  .catch(() => {});
              } else {
                this.$message({
                  type: "error",
                  message: "修改失败",
                });
              }
            });
        }
      });
    },
  },
};
</script>

<style scoped>
.forget {
  width: 100%;
  height: 100%;
  background-image: url("../assets/images/login3.jpg");
  background-size: 100% 100%;
  position: fixed;
}
.forgetbox {
  width: 400px;
  height: 265px;
  background-color: wheat;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 20px;
  border-radius: 25px;
}
.center {
  text-align: center;
}
.forget-title {
  text-align: center;
  display: block;
  line-height: 24px;
  font-size: 18px;
  color: #303133;
}
.forget-tip {
  font-size: 13px;
  display: block;
  margin-top: 18px;
  margin-left: 15px;
  word-break: break-all;
  color: #303133;
}
.uInfo-input-right {
  position: absolute;
  line-height: 48px;
  height: 100%;
  right: 64px;
  top: 22px;
  z-index: 999;
}

.uInfo-get-code {
  border: none;
  cursor: pointer;
  background-color: transparent;
  display: inline-block;
  height: 20px;
  color: #007dff;
  font-size: 14px;
}
</style>
